<template>
  <div class="security">
    <h3 class="title">
      <icon-svg name="iconSecurity"></icon-svg>
      安全设置
    </h3>
    <div class="info clearfix">
      <div class="avatar">
        <div class="avatar-img">
          <img v-if="info.avatarFileId" :src="$img(info.avatarFileId)" />
          <img v-else src="@/assets/img/avatar.png" alt="avatar" />
        </div>
      </div>
      <ul>
        <li>登录账号：{{ info.loginUname }}</li>
        <li>姓名：{{ info.cnName }}</li>
        <li>昵称：{{ info.nname }}</li>
        <li>注册时间：{{ info.createTm }}</li>
      </ul>
    </div>
    <div class="section clearfix">
      <p>您当前的账号安全程度</p>
      <el-progress
        :percentage="info.pwdStrong | pwdProgressFormatter"
        :show-text="false"
        :stroke-width="18"
        :class="'psd-strength' + info.pwdStrong"
      ></el-progress>
      <p>
        安全级别：<span :class="'psd-strength' + info.pwdStrong">{{ info.pwdStrong | pwdStrongFormatter }}</span>
      </p>
    </div>
    <div class="section">
      <div class="section-left">登录密码</div>
      <div class="section-center">
        安全性高的密码可以使账号更加安全，建议您定期更换密码，设置一个包含字母、符号或数字中至少两项且长度超过6位的密码
      </div>
      <div class="section-right">
        <i class="el-icon-success"></i>
        <span>已设置</span>
        <span class="section-handler" @click="openDialog('pwd')">修改</span>
      </div>
    </div>
    <!-- <div class="section">
      <div class="section-left">手机绑定</div>
      <div class="section-center">
        您已绑定了手机<span>182****5241</span>（您的手机为安全手机，可以找回密码，但不能用于登录）
      </div>
      <div class="section-right">
        <i class="el-icon-success"></i>
        <span>已设置</span>
        <span class="section-handler">修改</span>
      </div>
    </div>
    <div class="section">
      <div class="section-left">备用邮箱</div>
      <div class="section-center">
        您已绑定了邮箱<span>5110****@qq.com</span>（各类系统服务通知将发到您的邮箱）
      </div>
      <div class="section-right">
        <i class="el-icon-success"></i>
        <span>已设置</span>
        <span class="section-handler">修改</span>
      </div>
    </div> -->
    <div class="section">
      <div class="section-left">密保问题</div>
      <div class="section-center">
        建议您设置四个容易记住，且最不容易被他人获取的问题及答案。
      </div>
      <div class="section-right">
        <template v-if="pwdQa.qaId">
          <i class="el-icon-success"></i>
          <span>已设置</span>
          <span class="section-handler" @click="openDialog('checkPwdQa')">修改</span>
        </template>
        <template v-else>
          <i class="el-icon-warning orange"></i>
          <span class="orange">未设置</span>
          <span class="section-handler" @click="openDialog('pwdQa')">设置</span>
        </template>
      </div>
    </div>

    <el-dialog
      :title="dialogTitle"
      top="10vh"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :before-close="beforeClose"
      class="ots-edit-dialog personal-info-dialog"
      append-to-body
      width="40%"
      v-dialogMove
    >
      <!-- 修改密码 -->
      <template v-if="dialogType === 'pwd'">
        <el-form :model="editForm" label-width="150px" :rules="editFormRules" ref="editForm">
          <el-row>
            <el-form-item label="登录密码" prop="loginPwd">
              <el-input placeholder="请输入登录密码" type="password" v-model="editForm.loginPwd"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="新的登录密码" prop="newLoginPwd">
              <el-input placeholder="请输入新的登录密码" type="password" v-model="editForm.newLoginPwd"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="确认新的登录密码" prop="confirmNewLoginPwd">
              <el-input
                placeholder="请输入新的登录密码"
                type="password"
                v-model="editForm.confirmNewLoginPwd"
              ></el-input>
            </el-form-item>
          </el-row>
          <el-form-item label="密码强度">
            <el-progress
              :percentage="pasStrength.progress"
              :show-text="false"
              :stroke-width="12"
              :class="'psd-strength' + pasStrength.level"
            ></el-progress>
            <span class="pas-strength">
              安全级别：<span :class="'psd-strength' + pasStrength.level">{{ pasStrength.label }}</span>
            </span>
          </el-form-item>
        </el-form>
        <el-row>
          <el-col :span="24" align="right">
            <div class="tips">建议使用数字、字母和字符的组合密码，提高密码安全等级</div>
          </el-col>
        </el-row>
      </template>
      <!-- 修改密保问题 -->
      <template v-else-if="dialogType === 'pwdQa'">
        <el-form
          ref="pwdQaEditForm"
          :model="pwdQaEditForm"
          :rules="pwdQaEditFormRules"
          label-width="120px"
          @keyup.enter.native="confirm"
        >
          <el-form-item label="问题一" prop="firstQuestion">
            <el-select placeholder="请选择" v-model="pwdQaEditForm.firstQuestion">
              <el-option key="-1" label="自定义" value="0"></el-option>
              <el-option
                v-for="(question, index) in pwdQuestion"
                :key="index"
                :label="question"
                :value="question"
              ></el-option>
            </el-select>
          </el-form-item>
          <template v-if="pwdQaEditForm.firstQuestion === '0'">
            <el-form-item label="自定义问题一" prop="cusFirstQuestion">
              <el-input v-model="pwdQaEditForm.cusFirstQuestion" placeholder="自定义问题一"></el-input>
            </el-form-item>
            <el-form-item label="自定义答案一" prop="cusFirstAnswer">
              <el-input v-model="pwdQaEditForm.cusFirstAnswer" placeholder="自定义答案一"></el-input>
            </el-form-item>
          </template>
          <template v-else>
            <el-form-item label="答案一" prop="firstAnswer">
              <el-input v-model="pwdQaEditForm.firstAnswer" placeholder="答案一"></el-input>
            </el-form-item>
          </template>
          <el-form-item label="问题二" prop="secondQuestion">
            <el-select placeholder="请选择" v-model="pwdQaEditForm.secondQuestion">
              <el-option key="-1" label="自定义" value="0"></el-option>
              <el-option
                v-for="(question, index) in pwdQuestion"
                :key="index"
                :label="question"
                :value="question"
              ></el-option>
            </el-select>
          </el-form-item>
          <template v-if="pwdQaEditForm.secondQuestion === '0'">
            <el-form-item label="自定义问题二" prop="cusSecondQuestion">
              <el-input v-model="pwdQaEditForm.cusSecondQuestion" placeholder="自定义问题二"></el-input>
            </el-form-item>
            <el-form-item label="自定义答案二" prop="cusSecondAnswer">
              <el-input v-model="pwdQaEditForm.cusSecondAnswer" placeholder="自定义答案二"></el-input>
            </el-form-item>
          </template>
          <template v-else>
            <el-form-item label="答案二" prop="secondAnswer">
              <el-input v-model="pwdQaEditForm.secondAnswer" placeholder="答案二"></el-input>
            </el-form-item>
          </template>
          <el-form-item label="问题三" prop="thirdQuestion">
            <el-select placeholder="请选择" v-model="pwdQaEditForm.thirdQuestion">
              <el-option key="-1" label="自定义" value="0"></el-option>
              <el-option
                v-for="(question, index) in pwdQuestion"
                :key="index"
                :label="question"
                :value="question"
              ></el-option>
            </el-select>
          </el-form-item>
          <template v-if="pwdQaEditForm.thirdQuestion === '0'">
            <el-form-item label="自定义问题三" prop="cusThirdQuestion">
              <el-input v-model="pwdQaEditForm.cusThirdQuestion" placeholder="自定义问题三"></el-input>
            </el-form-item>
            <el-form-item label="自定义答案三" prop="cusThirdAnswer">
              <el-input v-model="pwdQaEditForm.cusThirdAnswer" placeholder="自定义答案三"></el-input>
            </el-form-item>
          </template>
          <template v-else>
            <el-form-item label="答案三" prop="thirdAnswer">
              <el-input v-model="pwdQaEditForm.thirdAnswer" placeholder="答案三"></el-input>
            </el-form-item>
          </template>
          <el-form-item label="问题四" prop="fourthlyQuestion">
            <el-select placeholder="请选择" v-model="pwdQaEditForm.fourthlyQuestion">
              <el-option key="-1" label="自定义" value="0"></el-option>
              <el-option
                v-for="(question, index) in pwdQuestion"
                :key="index"
                :label="question"
                :value="question"
              ></el-option>
            </el-select>
          </el-form-item>
          <template v-if="pwdQaEditForm.fourthlyQuestion === '0'">
            <el-form-item label="自定义问题四" prop="cusFourthlyQuestion">
              <el-input v-model="pwdQaEditForm.cusFourthlyQuestion" placeholder="自定义问题四"></el-input>
            </el-form-item>
            <el-form-item label="自定义答案四" prop="cusFourthlyAnswer">
              <el-input v-model="pwdQaEditForm.cusFourthlyAnswer" placeholder="自定义答案四"></el-input>
            </el-form-item>
          </template>
          <template v-else>
            <el-form-item label="答案四" prop="fourthlyAnswer">
              <el-input v-model="pwdQaEditForm.fourthlyAnswer" placeholder="答案四"></el-input>
            </el-form-item>
          </template>
        </el-form>
      </template>
      <template v-else-if="dialogType === 'checkPwdQa'">
        <el-form
          ref="checkPwdQaEditForm"
          :model="checkPwdQaEditForm"
          :rules="checkPwdQaEditFormRules"
          label-width="120px"
          @keyup.enter.native="confirm"
        >
          <template v-if="checkPwdQaEditForm.firstQuestion">
            <el-form-item label="问题" prop="firstQuestion">
              <el-input v-model="checkPwdQaEditForm.firstQuestion" readonly></el-input>
            </el-form-item>
            <el-form-item label="答案" prop="firstAnswer">
              <el-input v-model="checkPwdQaEditForm.firstAnswer" placeholder="请输入答案"></el-input>
            </el-form-item>
          </template>
          <template v-if="checkPwdQaEditForm.secondQuestion">
            <el-form-item label="问题" prop="secondQuestion">
              <el-input v-model="checkPwdQaEditForm.secondQuestion" readonly></el-input>
            </el-form-item>
            <el-form-item label="答案" prop="secondAnswer">
              <el-input v-model="checkPwdQaEditForm.secondAnswer" placeholder="请输入答案"></el-input>
            </el-form-item>
          </template>
          <template v-if="checkPwdQaEditForm.thirdQuestion">
            <el-form-item label="问题" prop="thirdQuestion">
              <el-input v-model="checkPwdQaEditForm.thirdQuestion" readonly></el-input>
            </el-form-item>
            <el-form-item label="答案" prop="thirdAnswer">
              <el-input v-model="checkPwdQaEditForm.thirdAnswer" placeholder="请输入答案"></el-input>
            </el-form-item>
          </template>
          <template v-if="checkPwdQaEditForm.fourthlyQuestion">
            <el-form-item label="问题" prop="fourthlyQuestion">
              <el-input v-model="checkPwdQaEditForm.fourthlyQuestion" readonly></el-input>
            </el-form-item>
            <el-form-item label="答案" prop="fourthlyAnswer">
              <el-input v-model="checkPwdQaEditForm.fourthlyAnswer" placeholder="请输入答案"></el-input>
            </el-form-item>
          </template>
        </el-form>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button @click="beforeClose()">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import utils from '@/plugins/utils'
export default {
  props: {
    info: {
      type: Object,
      required: true,
      default: () => {}
    }
  },
  data() {
    return {
      dialogVisible: false,
      dialogType: '',
      updataQa: false,
      editForm: {
        loginPwd: '',
        newLoginPwd: '',
        confirmNewLoginPwd: ''
      },
      editFormRules: {
        loginPwd: [{ required: true, message: '登录密码不能为空', trigger: 'blur' }],
        newLoginPwd: [{ required: true, message: '新的登录密码不能为空', trigger: 'blur' }],
        confirmNewLoginPwd: [{ required: true, message: '新的确认登录密码不能为空', trigger: 'blur' }]
      },
      pwdQa: {},
      allQa: {},
      pwdQuestion: [
        '我喜欢的颜色',
        '我的家在哪里',
        '我的大学',
        '我喜欢的小动物',
        '我的幸运号码是什么',
        '我的出生地是哪里',
        '我最感激的人是谁',
        '我的第一个老师叫什么名字'
      ],
      pwdQaEditForm: {
        firstQuestion: '',
        firstAnswer: '',
        secondQuestion: '',
        secondAnswer: '',
        thirdQuestion: '',
        thirdAnswer: '',
        fourthlyQuestion: '',
        fourthlyAnswer: '',
        cusFirstQuestion: '',
        cusFirstAnswer: '',
        cusSecondQuestion: '',
        cusSecondAnswer: '',
        cusThirdQuestion: '',
        cusThirdAnswer: '',
        cusFourthlyQuestion: '',
        cusFourthlyAnswer: ''
      },
      pwdQaEditFormRules: {
        firstQuestion: [
          { required: true, message: '问题一不能为空', trigger: 'change' },
          { max: 255, message: '问题长度应不能超过255个字符', trigger: 'blur' }
        ],
        firstAnswer: [
          { required: true, message: '答案一不能为空', trigger: 'blur' },
          { max: 100, message: '答案长度应不能超过100个字符', trigger: 'blur' }
        ],
        secondQuestion: [
          { required: true, message: '问题二不能为空', trigger: 'change' },
          { max: 255, message: '问题长度应不能超过255个字符', trigger: 'blur' }
        ],
        secondAnswer: [
          { required: true, message: '答案二不能为空', trigger: 'blur' },
          { max: 100, message: '答案长度应不能超过100个字符', trigger: 'blur' }
        ],
        thirdQuestion: [
          { required: true, message: '问题三不能为空', trigger: 'change' },
          { max: 255, message: '问题长度应不能超过255个字符', trigger: 'blur' }
        ],
        thirdAnswer: [
          { required: true, message: '答案三不能为空', trigger: 'blur' },
          { max: 100, message: '答案长度应不能超过100个字符', trigger: 'blur' }
        ],
        fourthlyQuestion: [
          { required: true, message: '问题四不能为空', trigger: 'change' },
          { max: 255, message: '问题长度应不能超过255个字符', trigger: 'blur' }
        ],
        fourthlyAnswer: [
          { required: true, message: '答案四不能为空', trigger: 'blur' },
          { max: 100, message: '答案长度应不能超过100个字符', trigger: 'blur' }
        ],
        cusFirstQuestion: [
          { required: true, message: '自定义问题一不能为空', trigger: 'blur' },
          { max: 255, message: '问题长度应不能超过255个字符', trigger: 'blur' }
        ],
        cusFirstAnswer: [
          { required: true, message: '自定义答案一不能为空', trigger: 'blur' },
          { max: 100, message: '答案长度应不能超过100个字符', trigger: 'blur' }
        ],
        cusSecondQuestion: [
          { required: true, message: '自定义问题二不能为空', trigger: 'blur' },
          { max: 255, message: '问题长度应不能超过255个字符', trigger: 'blur' }
        ],
        cusSecondAnswer: [
          { required: true, message: '自定义答案二不能为空', trigger: 'blur' },
          { max: 100, message: '答案长度应不能超过100个字符', trigger: 'blur' }
        ],
        cusThirdQuestion: [
          { required: true, message: '自定义问题三不能为空', trigger: 'blur' },
          { max: 255, message: '问题长度应不能超过255个字符', trigger: 'blur' }
        ],
        cusThirdAnswer: [
          { required: true, message: '自定义答案三不能为空', trigger: 'blur' },
          { max: 100, message: '答案长度应不能超过100个字符', trigger: 'blur' }
        ],
        cusFourthlyQuestion: [
          { required: true, message: '自定义问题四不能为空', trigger: 'blur' },
          { max: 255, message: '问题长度应不能超过255个字符', trigger: 'blur' }
        ],
        cusFourthlyAnswer: [
          { required: true, message: '自定义答案四不能为空', trigger: 'blur' },
          { max: 100, message: '答案长度应不能超过100个字符', trigger: 'blur' }
        ]
      },
      checkPwdQaEditForm: {
        firstQuestion: '',
        firstAnswer: '',
        secondQuestion: '',
        secondAnswer: '',
        thirdQuestion: '',
        thirdAnswer: '',
        fourthlyQuestion: '',
        fourthlyAnswer: ''
      },
      checkPwdQaEditFormRules: {
        firstAnswer: [
          { required: true, message: '答案一不能为空', trigger: 'blur' },
          { max: 100, message: '密码长度应不能超过100个字符', trigger: 'blur' }
        ],
        secondAnswer: [
          { required: true, message: '答案二不能为空', trigger: 'blur' },
          { max: 100, message: '密码长度应不能超过100个字符', trigger: 'blur' }
        ],
        thirdAnswer: [
          { required: true, message: '答案三不能为空', trigger: 'blur' },
          { max: 100, message: '密码长度应不能超过100个字符', trigger: 'blur' }
        ],
        fourthlyAnswer: [
          { required: true, message: '答案四不能为空', trigger: 'blur' },
          { max: 100, message: '密码长度应不能超过100个字符', trigger: 'blur' }
        ]
      },
      pasStrength: {
        level: 0,
        progress: 0,
        label: '弱'
      }
    }
  },
  watch: {
    'info.loginUname'(val) {
      if (val) this.getPwdQa()
    },
    'editForm.newLoginPwd'(val) {
      let progress = utils.checkStrong(val)
      switch (progress) {
        case 0:
          this.pasStrength.level = 1
          this.pasStrength.progress = 10
          this.pasStrength.label = '很弱'
          break
        case 1:
          this.pasStrength.level = 1
          this.pasStrength.progress = 25
          this.pasStrength.label = '弱'
          break
        case 2:
          this.pasStrength.level = 2
          this.pasStrength.progress = 50
          this.pasStrength.label = '中'
          break
        case 3:
          this.pasStrength.level = 3
          this.pasStrength.progress = 75
          this.pasStrength.label = '强'
          break
        case 4:
          this.pasStrength.level = 4
          this.pasStrength.progress = 100
          this.pasStrength.label = '很强'
          break
      }
    }
  },
  computed: {
    dialogTitle() {
      let title = ''
      switch (this.dialogType) {
        case 'pwd':
          title = '修改密码'
          break
        case 'pwdQa':
          title = '修改密保问题'
          break
        case 'checkPwdQa':
          title = '请回答问题'
          break
      }
      return title
    }
  },
  methods: {
    openDialog(type) {
      if (type === 'checkPwdQa') {
        this.$ajax({
          url: this.$ajax.setUrl('auth/authPwdQa/pwdQa'),
          method: 'get',
          params: this.$ajax.setParams()
        }).then(({ data }) => {
          if (data && data.code === '0') {
            this.checkPwdQaEditForm.firstQuestion = data.data.firstQuestion
            this.checkPwdQaEditForm.secondQuestion = data.data.secondQuestion
            this.checkPwdQaEditForm.thirdQuestion = data.data.thirdQuestion
            this.checkPwdQaEditForm.fourthlyQuestion = data.data.fourthlyQuestion
          } else {
            this.$message.error(data.data || data.msg)
          }
        })
      }
      this.dialogType = type
      this.dialogVisible = true
      this.resetQuestion()
    },
    getPwdQa() {
      this.$ajax({
        url: this.$ajax.setUrl('auth/authPwdQa/loginUname/' + this.info.loginUname),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          if (data.data) {
            this.pwdQa = data.data
          } else {
            this.$message({
              message: '未设置密保问题，请及时设置',
              type: 'warning'
            })
          }
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    resetQuestion() {
      let data = this.updataQa ? this.allQa : this.pwdQa
      if (data.qaId || this.updataQa) {
        if (!this.pwdQuestion.find(value => value === data.firstQuestion)) {
          this.pwdQaEditForm.firstQuestion = '0'
          this.pwdQaEditForm.cusFirstQuestion = data.firstQuestion
        } else {
          this.pwdQaEditForm.firstQuestion = data.firstQuestion
          this.pwdQaEditForm.cusFirstQuestion = ''
        }
        if (!this.pwdQuestion.find(value => value === data.secondQuestion)) {
          this.pwdQaEditForm.secondQuestion = '0'
          this.pwdQaEditForm.cusSecondQuestion = data.secondQuestion
        } else {
          this.pwdQaEditForm.secondQuestion = data.secondQuestion
          this.pwdQaEditForm.cusSecondQuestion = ''
        }
        if (!this.pwdQuestion.find(value => value === data.thirdQuestion)) {
          this.pwdQaEditForm.thirdQuestion = '0'
          this.pwdQaEditForm.cusThirdQuestion = data.thirdQuestion
        } else {
          this.pwdQaEditForm.thirdQuestion = data.thirdQuestion
          this.pwdQaEditForm.cusThirdQuestion = ''
        }
        if (!this.pwdQuestion.find(value => value === data.fourthlyQuestion)) {
          this.pwdQaEditForm.fourthlyQuestion = '0'
          this.pwdQaEditForm.cusFourthlyQuestion = data.fourthlyQuestion
        } else {
          this.pwdQaEditForm.fourthlyQuestion = data.fourthlyQuestion
          this.pwdQaEditForm.cusFourthlyQuestion = ''
        }
      } else {
        this.pwdQaEditForm.firstQuestion = ''
        this.pwdQaEditForm.cusFirstQuestion = ''
        this.pwdQaEditForm.secondQuestion = ''
        this.pwdQaEditForm.cusSecondQuestion = ''
        this.pwdQaEditForm.thirdQuestion = ''
        this.pwdQaEditForm.cusThirdQuestion = ''
        this.pwdQaEditForm.fourthlyQuestion = ''
        this.pwdQaEditForm.cusFourthlyQuestion = ''
      }
    },
    beforeClose() {
      this.clearDialog()
    },
    confirm() {
      if (this.dialogType === 'pwd') {
        this.$refs['editForm'].validate(valid => {
          if (valid) {
            if (this.pasStrength.level < 2) {
              this.$message.error('密码强度不足，请重新输入')
              return
            }
            if (this.editForm.confirmNewLoginPwd !== this.editForm.newLoginPwd) {
              this.$message.error('两次输入的新密码不一致，请重新输入')
              return
            }
            this.$ajax({
              url: this.$ajax.setUrl('auth/authUser/pwd'),
              method: 'put',
              data: this.$ajax.setData({
                loginPwd: utils.crypto(this.editForm.loginPwd),
                newLoginPwd: utils.crypto(this.editForm.newLoginPwd),
                pwdStrong: this.pasStrength.level
              })
            }).then(({ data }) => {
              if (data && data.code === '0') {
                this.$message.success(data.data || data.msg)
                this.clearDialog()
              } else {
                this.$message.error(data.data || data.msg)
              }
            })
          }
        })
      } else if (this.dialogType === 'pwdQa') {
        this.$refs['pwdQaEditForm'].validate(valid => {
          if (valid) {
            // 判断问题是否一样
            let firstQuestion =
              this.pwdQaEditForm.firstQuestion && this.pwdQaEditForm.firstQuestion !== '0'
                ? this.pwdQaEditForm.firstQuestion
                : this.pwdQaEditForm.cusFirstQuestion
            let firstAnswer = this.pwdQaEditForm.firstAnswer
              ? this.pwdQaEditForm.firstAnswer
              : this.pwdQaEditForm.cusFirstAnswer
            let secondQuestion =
              this.pwdQaEditForm.secondQuestion && this.pwdQaEditForm.secondQuestion !== '0'
                ? this.pwdQaEditForm.secondQuestion
                : this.pwdQaEditForm.cusSecondQuestion
            let secondAnswer = this.pwdQaEditForm.secondAnswer
              ? this.pwdQaEditForm.secondAnswer
              : this.pwdQaEditForm.cusSecondAnswer
            let thirdQuestion =
              this.pwdQaEditForm.thirdQuestion && this.pwdQaEditForm.thirdQuestion !== '0'
                ? this.pwdQaEditForm.thirdQuestion
                : this.pwdQaEditForm.cusThirdQuestion
            let thirdAnswer = this.pwdQaEditForm.thirdAnswer
              ? this.pwdQaEditForm.thirdAnswer
              : this.pwdQaEditForm.cusThirdAnswer
            let fourthlyQuestion =
              this.pwdQaEditForm.fourthlyQuestion && this.pwdQaEditForm.fourthlyQuestion !== '0'
                ? this.pwdQaEditForm.fourthlyQuestion
                : this.pwdQaEditForm.cusFourthlyQuestion
            let fourthlyAnswer = this.pwdQaEditForm.fourthlyAnswer
              ? this.pwdQaEditForm.fourthlyAnswer
              : this.pwdQaEditForm.cusFourthlyAnswer
            let questions = [firstQuestion, secondQuestion, thirdQuestion, fourthlyQuestion]
            if (new Set(questions).size < 4) {
              this.$message.error('密保问题不能重复定义')
              return
            }
            let params = {
              firstQuestion,
              firstAnswer,
              secondQuestion,
              secondAnswer,
              thirdQuestion,
              thirdAnswer,
              fourthlyQuestion,
              fourthlyAnswer
            }
            if (this.updataQa) {
              params = {
                firstQuestion: this.checkPwdQaEditForm.firstQuestion,
                firstAnswer: this.checkPwdQaEditForm.firstAnswer,
                secondQuestion: this.checkPwdQaEditForm.secondQuestion,
                secondAnswer: this.checkPwdQaEditForm.secondAnswer,
                thirdQuestion: this.checkPwdQaEditForm.thirdQuestion,
                thirdAnswer: this.checkPwdQaEditForm.thirdAnswer,
                fourthlyQuestion: this.checkPwdQaEditForm.fourthlyQuestion,
                fourthlyAnswer: this.checkPwdQaEditForm.fourthlyAnswer,
                newFirstQuestion: firstQuestion,
                newFirstAnswer: firstAnswer,
                newSecondQuestion: secondQuestion,
                newSecondAnswer: secondAnswer,
                newThirdQuestion: thirdQuestion,
                newThirdAnswer: thirdAnswer,
                newFourthlyQuestion: fourthlyQuestion,
                newFourthlyAnswer: fourthlyAnswer,
                userId: this.$store.state.user.id
              }
            }
            this.$ajax({
              url: this.$ajax.setUrl('auth/authPwdQa'),
              method: this.updataQa ? 'put' : 'post',
              data: this.$ajax.setData(params)
            }).then(({ data }) => {
              if (data && data.code === '0') {
                this.$message.success(data.data || data.msg)
                this.clearDialog()
                this.clearAnswer()
                this.getPwdQa()
              } else {
                this.$message.error(data.data || data.msg)
              }
            })
          }
        })
      } else if (this.dialogType === 'checkPwdQa') {
        this.$refs['checkPwdQaEditForm'].validate(valid => {
          if (valid) {
            this.$ajax({
              url: this.$ajax.setUrl('auth/authPwdQa/pwdQaLogout'),
              method: 'post',
              data: this.$ajax.setData({
                firstQuestion: this.checkPwdQaEditForm.firstQuestion,
                firstAnswer: this.checkPwdQaEditForm.firstAnswer,
                secondQuestion: this.checkPwdQaEditForm.secondQuestion,
                secondAnswer: this.checkPwdQaEditForm.secondAnswer,
                thirdQuestion: this.checkPwdQaEditForm.thirdQuestion,
                thirdAnswer: this.checkPwdQaEditForm.thirdAnswer,
                fourthlyQuestion: this.checkPwdQaEditForm.fourthlyQuestion,
                fourthlyAnswer: this.checkPwdQaEditForm.fourthlyAnswer,
                userId: this.$store.state.user.id
              })
            }).then(({ data }) => {
              if (data && data.code === '0') {
                this.$message.success(data.data || data.msg)
                this.clearDialog()
                this.getAllQa()
              } else {
                this.$message.error(data.data || data.msg)
              }
            })
          }
        })
      }
    },
    getAllQa() {
      this.$ajax({
        url: this.$ajax.setUrl('auth/authPwdQa/allPwdQa'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.allQa.firstQuestion = data.data.firstQuestion
          this.allQa.secondQuestion = data.data.secondQuestion
          this.allQa.thirdQuestion = data.data.thirdQuestion
          this.allQa.fourthlyQuestion = data.data.fourthlyQuestion
          this.updataQa = true
          this.openDialog('pwdQa')
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    clearDialog() {
      this.editForm.loginPwd = ''
      this.editForm.newLoginPwd = ''
      this.editForm.confirmNewLoginPwd = ''
      this.resetQuestion()
      this.updataQa = false
      this.dialogType = ''
      this.dialogVisible = false
    },
    clearAnswer() {
      this.pwdQaEditForm.firstAnswer = ''
      this.pwdQaEditForm.secondAnswer = ''
      this.pwdQaEditForm.thirdAnswer = ''
      this.pwdQaEditForm.fourthlyAnswer = ''
      this.pwdQaEditForm.cusFirstAnswer = ''
      this.pwdQaEditForm.cusSecondAnswer = ''
      this.pwdQaEditForm.cusThirdAnswer = ''
      this.pwdQaEditForm.cusFourthlyAnswer = ''
      this.checkPwdQaEditForm.firstQuestion = ''
      this.checkPwdQaEditForm.firstAnswer = ''
      this.checkPwdQaEditForm.secondQuestion = ''
      this.checkPwdQaEditForm.secondAnswer = ''
      this.checkPwdQaEditForm.thirdQuestion = ''
      this.checkPwdQaEditForm.thirdAnswer = ''
      this.checkPwdQaEditForm.fourthlyQuestion = ''
      this.checkPwdQaEditForm.fourthlyAnswer = ''
    }
  },
  filters: {
    pwdStrongFormatter(val) {
      let label = '弱'
      if (val === 0 || val === 1) label = '弱'
      else if (val === 2) label = '中'
      else if (val === 3) label = '强'
      else if (val === 4) label = '很强'
      return label
    },
    pwdProgressFormatter(val) {
      let progress = 0
      if (val === 0) progress = 0
      else if (val === 1) progress = 25
      else if (val === 2) progress = 50
      else if (val === 3) progress = 75
      else if (val === 4) progress = 100
      return progress
    }
  }
}
</script>

<style lang="scss">
$border: 1px solid $border-color;
$borderDashed: 1px dashed $border-color;
.security {
  .title {
    vertical-align: middle;
    margin: 0 20px;
    padding: 10px 0;
    border-bottom: $border;
    color: $theme-color;
    svg {
      width: 25px;
      height: 25px;
      vertical-align: middle;
      margin-right: 5px;
    }
    i {
      font-size: 18px;
      color: #cecece;
      vertical-align: middle;
      margin: -5px 0 0 5px;
      cursor: pointer;
    }
  }
  .info {
    padding: 10px;
    border-bottom: $border;
    .avatar {
      width: 120px;
      margin: 0 10px;
      text-align: center;
      float: left;
      .avatar-img {
        width: 120px;
        height: 120px;
        border-radius: 10px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    ul {
      margin: 0 20px;
      padding: 0;
      float: left;
      li {
        list-style-type: none;
        line-height: 30px;
      }
    }
  }
  .section {
    padding: 10px 0;
    border-bottom: $borderDashed;
    position: relative;
    p,
    .el-progress {
      float: left;
      margin: 10px 20px;
      padding: 0;
    }
    .el-progress {
      width: 200px;
      margin: 10px;
      .el-progress-bar__outer {
        border-radius: 5px;
      }
      .el-progress-bar__inner {
        border-radius: 5px;
      }
    }
    .section-left {
      width: 120px;
      padding: 0 20px;
      position: absolute;
      top: 20px;
      bottom: 20px;
      left: 0;
      text-align: center;
      &:after {
        display: inline-block;
        width: 0;
        height: 100%;
        content: '';
        vertical-align: middle;
      }
    }
    .section-center {
      padding: 10px;
      margin: 0 200px 0 120px;
      line-height: 25px;
    }
    .section-right {
      width: 200px;
      padding: 0 20px;
      position: absolute;
      top: 20px;
      bottom: 20px;
      right: 0;
      &:after {
        display: inline-block;
        width: 0;
        height: 100%;
        content: '';
        vertical-align: middle;
      }
      i {
        color: #03a739;
        margin-right: 10px;
        &.orange {
          color: #f0ad4e;
        }
      }
      .section-handler {
        display: inline-block;
        margin-left: 20px;
        position: relative;
        cursor: pointer;
        &:before {
          width: 1px;
          height: 80%;
          content: '';
          position: absolute;
          top: 10%;
          left: -10px;
          transform: scaleX(0.5);
        }
      }
    }
  }
}
.avatar-exchange {
  text-align: center;
  .new-avatar {
    display: inline-block;
    width: 148px;
    height: 148px;
    vertical-align: top;
    border-radius: 5px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .ots-upload {
    display: inline-block;
  }
}
.personal-info-dialog {
  .el-progress {
    display: inline-block;
    width: 70%;
  }
  .pas-strength {
    display: inline-block;
    width: 30%;
    text-align: right;
  }
}
</style>
